import LineChart from './LineChart'
import emptyUrl from '@/assets/images/empty-chart/line.png'

const axisConfig = {
  nameUnitEnabled: {
    type: 'checkbox',
    title: '显示轴名称和单位',
    defaultValue: false
  },
  nameUnit: {
    type: 'object',
    options: {
      name: {
        type: 'input',
        label: '轴名称'
      },
      style: {
        type: 'input',
        label: '轴单位'
      }
    }
  },
  axisLineEnabled: {
    type: 'checkbox',
    title: '显示轴线',
    defaultValue: true
  },
  splitLineEnabled: {
    type: 'checkbox',
    title: '显示网格线',
    defaultValue: true
  },
  axisLabelEnabled: {
    type: 'checkbox',
    title: '显示轴标签',
    defaultValue: true
  }
}

export default {
  label: '折线图',
  icon: 'icon-line',
  emptyUrl,
  group: 'line',
  Chart: LineChart,
  requestFields: {
    xAxis: {
      type: 'dimension',
      role: 'category',
      label: '横轴',
      required: true
    },
    yAxis: {
      type: 'measure',
      role: 'value',
      label: '纵轴',
      required: true
    },
    legend: {
      limit: 1,
      role: 'legend',
      type: 'dimension',
      label: '颜色图例'
    }
  },
  configs: {
    chart: {
      label: '图表',
      options: {
        legend: {
          type: 'object',
          layout: 'inline',
          offset: 0,
          options: {
            enabled: {
              type: 'checkbox',
              title: '显示图例',
              defaultValue: true
            },
            position: {
              type: 'select',
              defaultValue: 'top',
              options: [
                { label: '上', value: 'top' },
                { label: '下', value: 'bottom' },
                { label: '左', value: 'left' },
                { label: '右', value: 'right' }
              ]
            }
          }
        },
        tooltipEnabled: {
          type: 'checkbox',
          title: '鼠标悬停显示详细数据',
          defaultValue: true
        },
        dataZoomEnabled: {
          type: 'checkbox',
          title: '显示缩略轴',
          defaultValue: false
        },
        doubleYAxisEnabled: {
          type: 'checkbox',
          title: '显示双y轴',
          defaultValue: false
        }
      }
    },
    axis: {
      label: '坐标轴',
      options: {
        axis: {
          type: 'radio',
          optionType: 'button',
          buttonStyle: 'solid',
          defaultValue: 'xAxis',
          options: [
            { label: 'X轴', value: 'xAxis' },
            { label: 'Y轴', value: 'yAxis' },
            {
              label: 'Y右轴',
              value: 'y2Axis',
              when: (_, v) => v.chart.doubleYAxisEnabled
            }
          ]
        },
        xAxis: {
          when: (v) => v.axis === 'xAxis',
          type: 'object',
          offset: 0,
          options: {
            ...axisConfig
          }
        },
        yAxis: {
          when: (v) => v.axis === 'yAxis',
          type: 'object',
          offset: 0,
          options: {
            ...axisConfig
          }
        },
        y2Axis: {
          when: (v) => v.axis === 'y2Axis',
          type: 'object',
          offset: 0,
          options: {
            ...axisConfig
          }
        }
      }
    },
    series: {
      label: '序列',
      options: {
        maxEnabled: {
          type: 'checkbox',
          title: '突出最大值',
          defaultValue: false
        },
        minEnabled: {
          type: 'checkbox',
          title: '突出最小值',
          defaultValue: false
        },
        labelEnabled: {
          type: 'checkbox',
          title: '显示数值标签',
          defaultValue: false
        }
      }
    }
  }
}
